<template>
    <div>
        <NavHeader></NavHeader>
        <div class="h_box">
            <div class="h_c_top">
                <div class="title_box">
                    <h2 class="title_name">练习七曲线积分</h2>
                    <div class="info_box">
                        题量: 6 
                    </div>
                    <div class="info_box">
                        作答时间:2020-05-10 07:56至2020-05-15 19:57
                    </div>
                </div>
                <div class="bottom_box">
                    <ul>
                        <li class="work_box">
                            <p class="tip">1. (单选题)</p>
                            <el-radio-group v-model="radio">
                              <el-radio :label="3">A 备选项</el-radio>
                              <el-radio :label="6">B 备选项</el-radio>
                              <el-radio :label="9">C 备选项</el-radio>
                            </el-radio-group>
                        </li>
                        <li class="work_box">
                            <p class="tip">2. 多选题</p>
                            <el-checkbox-group v-model="checkList">
                              <el-checkbox label="复选框 A"></el-checkbox>
                              <el-checkbox label="复选框 B"></el-checkbox>
                              <el-checkbox label="复选框 C"></el-checkbox>
                            </el-checkbox-group>
                        </li>
                        <li class="work_box">
                            <p class="tip">3. 填空题</p>
                            <el-input
                              class="w_input"
                              placeholder="请输入内容"
                              v-model="input"
                              size="medium"
                              maxlength= 20
                              clearable>
                            </el-input>
                        </li>
                        <li class="work_box">
                            <p class="tip">4. 简答题</p>
                            <el-input
                             class="w_textarea"
                             type="textarea"
                             :autosize="{ minRows: 2, maxRows: 8}"
                             placeholder="请输入内容"
                             v-model="textarea1">
                           </el-input>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import NavHeader from '../components/NavHeader.vue'
export default {
    data(){
        return{
          radio: 6,
          checkList: ['复选框 A'],
          input:'',
          textarea1:''
        }
    },
    components:{
        NavHeader,
    },
}
</script>

<style lang="scss" scoped>
  .h_box{
    width: 80%;
    min-height: 800px;
    background-color: #f2f4f7;
    padding:10%;
    .h_c_top{
        width: 100%;
        min-height: 600px;
        background-color: white;
        border-radius: 10px;
        padding-bottom: 50px;
        .title_box{
          width: 100%;
          height: 120px;
          border-bottom: 1px solid #f2f2f2;
          .title_name{
            width: 100%;
            line-height: 25px;
            padding: 30px 80px 0;
            font-size: 18px;
            font-weight: bold;
          }
          .info_box{
            width: 100%;
            line-height: 16px;
            font-size: 14px;
            color: rgb(168,168,179);
            padding-left: 80px;
            margin:10px 0;
          }
        }
        .bottom_box{
            width: 100%;
            padding-top:50px;
            .work_box{
               width: 100%;
               height: auto;
               margin-top:20px;
               padding-left:80px;
               font-size: 14px;
               .tip{
                margin-bottom: 10px;
               }
               .w_input{
                width: 250px;
               }
               .w_textarea{
                width: 400px;
               }  
            }
        }
    }
  }
</style>